<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="commons :: head('学生管理')">
    <title>Messages : Create</title>
</head>
<body>
<div th:insert="registrar/registrar::nav(1)">
</div>
<div class="container">
    <div class="row">
        <button class="btn btn-primary" data-toggle="modal" onclick="showModal(true)">增加学生</button>
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 700px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title">学生管理</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="account_input" class="col-sm-2 control-label">学生账号：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="account" class="form-control" id="account_input"
                                           placeholder="学生账号">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password_input" class="col-sm-2 control-label">账号密码：</label>
                                <div class="col-sm-10">
                                    <input type="password" name="password" class="form-control" id="password_input"
                                           placeholder="账号密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name_input" class="col-sm-2 control-label">学生姓名：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="name" class="form-control" id="name_input"
                                           placeholder="学生姓名">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="collegeId_input" class="col-sm-2 control-label">学院名称：</label>
                                <div class="col-sm-10">
                                    <select class="form-control" id="collegeId_input" name="collegeId"></select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="address_input" class="col-sm-2 control-label">学生地址：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="address" class="form-control" id="address_input"
                                           placeholder="学生地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="birthday_input" class="col-sm-2 control-label">出生日期：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="birthday" class="form-control" id="birthday_input"
                                           placeholder="出生日期">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="phone_input" class="col-sm-2 control-label">手机号：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="phone" class="form-control" id="phone_input"
                                           placeholder="手机号">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="save_click" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <table id="table" class="table table-responsive table-hover">
            <thead>
            <tr>
                <td>学生id</td>
                <td>学生账号</td>
                <td>账号密码</td>
                <td>学生姓名</td>
                <td>学院名称</td>
                <td>学生地址</td>
                <td>出生日期</td>
                <td>手机号</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="row">
        <div class="col-md-6" id="page_info">
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav">
                </ul>
            </nav>
        </div>
    </div>
    <div th:replace="commons::footer"></div>
    <script>
        var click_id,curPage,total,add;
        $(function () {
            toPageNum(1);
        });
        $("#save_click").click(function () {
            var data=$("#modal form").serialize();
            if (!add){data+="&id="+click_id}
            $.ajax({
                url: add?'addStudent':'modifyStudent',
                data: data,
                type: 'post',
                success: function (result) {
                    if (result.code === 100) {
                        $('#modal').modal('hide');
                        toPageNum(add?total:curPage);
                    } else {
                        alert(result.extend.error);
                    }
                }
            })
        });
        function toPageNum(page) {
            $.ajax({
                url: "getStudents",
                data: "page=" + page,
                type: "get",
                success: function (result) {
                    console.log(result);
                    build_tables(result.extend.pageInfo.list);
                    build_page_info(result.extend.pageInfo);
                    build_page_nav(result.extend.pageInfo);
                }
            });
        }
        //构建信息表
        function build_tables(result) {
            $("#table tbody").empty();
            $.each(result, function (index, item) {
                var id = $("<td></td>").append(item.id);
                var account = $("<td></td>").append(item.account);
                var password = $("<td></td>").append(item.password);
                var name = $("<td></td>").append(item.name);
                var college = $("<td></td>").append(item.college.collegeName);
                var address = $("<td></td>").append(item.address);
                var birthday = $("<td></td>").append(item.birthday);
                var phone = $("<td></td>").append(item.phone);
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append("编辑");
                var trashBtn = $("<button></button>").addClass("btn btn-danger btn-sm trash_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                var btnTd = $("<td></td>").append(editBtn, " ", trashBtn);
                $("<tr></tr>").append(id, account, password, name, college,address,birthday, phone, btnTd).appendTo("#table tbody").attr("item_id",item.id);
            })
        }
        //构建分页信息
        function build_page_info(result) {
            total=result.pages;curPage=result.pageNum;
            $("#page_info").empty();
            $("#page_info").append("当前第" + result.pageNum + "页，总" + result.pages + "页，总" + result.total + "条记录。")
            total = result.pages;
        }
        //构建分页导航条，下次用vue.js，这太不好写了
        function build_page_nav(result) {
            $("#page_nav").empty();
            var firstLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "javascript:toPageNum(1);"));
            var preLi = $("<li></li>").append($("<span></span>").append("&laquo;")).click(function () {
                toPageNum(result.prePage)
            });
            var nextLi = $("<li></li>").append($("<span></span>").append("&raquo;")).click(function () {
                toPageNum(result.nextPage)
            });
            var lastLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "javascript:toPageNum(" + result.pages + ");"));

            if (!result.hasPreviousPage) {
                firstLi.addClass("disabled");
                preLi.addClass("disabled").unbind("click");
            }
            if (!result.hasNextPage) {
                nextLi.addClass("disabled").unbind("click");
                //lastLi.addClass("disabled").firstChild().removeAttr("href");
            }
            $("#page_nav").append(firstLi, preLi);
            $.each(result.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "javascript:toPageNum(" + item + ");"));
                if (item === result.pageNum) {
                    numLi.addClass("active");
                }
                $("#page_nav").append(numLi);
            });
            $("#page_nav").append(nextLi, lastLi);
        }
        //编辑
        $(document).on("click",".edit_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            console.log(click_id);
            $.ajax({
                url: 'getStudent?id='+click_id,
                type: 'get',
                success: function (result) {
                    var data=result.extend.data;
                    if (result.code === 100) {
                        showModal(false,data.account,data.password,data.name,data.college.id,data.address,data.birthday,data.phone);
                    }
                }
            })

        });
        //删除
        $(document).on("click",".trash_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            var name = $(this).parents("tr").find("td:eq(1)").text();
            if(confirm("确定删除"+name+"吗？")){
                $.ajax({
                    url: 'deleteStudent?id='+click_id,
                    type: 'get',
                    success: function (result) {
                        toPageNum(curPage);
                        alert(result.extend.message);
                    }
                })
            }
        });
        function showModal(b,p1,p2,p3,p4,p5,p6,p7) {
            add=b;
            $("#account_input").val(p1);
            $("#password_input").val(p2);
            $("#name_input").val(p3);

            $("#address_input").val(p5);
            $("#birthday_input").val(p6);
            $("#phone_input").val(p7);
            $.ajax({
                url: 'getAllColleges',
                type: 'get',
                success: function (result) {
                    $('#collegeId_input').empty();
                    var data=result.extend.data;
                    if (result.code === 100) {
                        $.each(data,function(){
                            var optionEle = $("<option></option>").append(this.collegeName).attr("value",this.id);
                            if(!add&&p4===this.id){
                                optionEle.attr("selected","selected");
                            }
                            optionEle.appendTo('#collegeId_input');
                        });
                    }
                }
            })
            $("#modal").modal({
                backdrop:"static"
            });
        }
    </script>
</div>
</body>
</html>